<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ergo</title>
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./assets/css/reset.css" />

    <!-- 引入本界面的样式表 -->
    <link rel="stylesheet" href="./assets/css/index.css" />

    <!-- 百度地图API引入 -->
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=BLiVZcoPIWGDIemPgSltpz92E9rae4Wa"></script>
</head>
<body>
    <!-- 头部 -->
    <header id="header" class="header">
        <div class="toggle">
            <img src="./assets/images/toggle.png" />
        </div>

        <div class="logo">
            <img src="./assets/images/logo.png" />
        </div>

        <div class="search">
            <img src="./assets/images/search.png" />
        </div>
    </header>

    <!-- banner -->
    <div class="banner">
        <img src="./assets/images/banner.png" />
    </div>

    <!-- 风险评估 -->
    <div class="assessment">
        <div class="title">风险评估</div>

        <div class="list">
            <div class="item">
                <!-- 图标 -->
                <div class="thumb">
                    <img src="./assets/images/assessment1.png" />
                </div>
                <!-- 文字 -->
                <div class="desc">办公室</div>
            </div>
            <div class="item">
                <!-- 图标 -->
                <div class="thumb">
                    <img src="./assets/images/assessment1.png" />
                </div>
                <!-- 文字 -->
                <div class="desc">工业</div>
            </div>
            <div class="item">
                <!-- 图标 -->
                <div class="thumb">
                    <img src="./assets/images/assessment1.png" />
                </div>
                <!-- 文字 -->
                <div class="desc">个人/家居</div>
            </div>
            <div class="item">
                <!-- 图标 -->
                <div class="thumb">
                    <img src="./assets/images/assessment1.png" />
                </div>
                <!-- 文字 -->
                <div class="desc">其他行业</div>
            </div>
        </div>
    </div>

    <!-- 功能服务 -->
    <div id="function" class="function">
        <div class="back">
            <img src="./assets/images/back1.png" />
        </div>
        <div class="content">
            <h3 class="title">专业咨询</h3>

            <ul class="list">
                <li><a href="#">个人咨询</a></li>
                <li><a href="#">企业咨询</a></li>
            </ul>
        </div>
        <div class="back">
            <img src="./assets/images/back1.png" />
        </div>
        <div class="content">
            <h3 class="title">专业咨询</h3>

            <ul class="list">
                <li><a href="#">个人咨询</a></li>
                <li><a href="#">企业咨询</a></li>
            </ul>
        </div>
        <div class="back">
            <img src="./assets/images/back1.png" />
        </div>
        <div class="content">
            <h3 class="title">专业咨询</h3>

            <ul class="list">
                <li><a href="#">个人咨询</a></li>
                <li><a href="#">企业咨询</a></li>
            </ul>
        </div>
    </div>

    <!-- 介绍和应用 -->
    <div id="app" class="app">
        <div class="title">人体工学介绍和应用</div>

        <!-- 背景图 -->
        <div class="box">
            <div class="back">
                <img src="./assets/images/appback.png" />
            </div>
            <!-- 黑色阴影层 -->
            <div class="mask">
                <h3 class="title">人体工学介绍</h3>
                <div class="tag">
                    <span>历史</span>
                    <span>现在</span>
                    <span>将来</span>
                </div>
            </div>
        </div>

        <!-- 3个按钮 -->
        <div class="btnlist">
            <div class="item">
                <div class="icon">
                    <img src="./assets/images/application-icon1.png" />
                </div>
                <div class="name">职业应用</div>
            </div>
            <div class="item">
                <div class="icon">
                    <img src="./assets/images/application-icon2.png" />
                </div>
                <div class="name">个人/家居应用</div>
            </div>
            <div class="item">
                <div class="icon">
                    <img src="./assets/images/application-icon3.png" />
                </div>
                <div class="name">其他应用</div>
            </div>
        </div>
    </div>

    <!-- 联系我们 -->
    <div id="contact" class="contact">
        <div class="title">联系我们</div>

        <!-- 信息 -->
        <div class="info">
            <div class="tel">
                <span class="icon">
                    <img src="./assets/images/tel.png" />
                </span>

                <span class="text">+86 15217196291</span>
            </div>

            <div class="email">
                <div class="item">
                    <span class="icon">
                        <img src="./assets/images/tel.png" />
                    </span>

                    <span class="text">01-706-560-3604</span>
                </div>
                <div class="item">
                    <span class="icon">
                        <img src="./assets/images/tel.png" />
                    </span>

                    <span class="text">01-706-560-3604</span>
                </div>
            </div>

            <div class="address">
                <span class="icon">
                    <img src="./assets/images/tel.png" />
                </span>

                <span class="text">广州市天河区珠江新城珠江西路高德置地D座15楼</span>
            </div>
        </div>

        <!-- 地图 -->
        <div class="map" id="map"></div>
    </div>

    <!-- 底部 -->
    <footer class="footer">
        <a href="#header" class="item">
            <span class="iconfont">&#xe7a7;</span>
            <span class="name">首页</span>
        </a>
        <a href="#function" class="item">
            <span class="iconfont">&#xe831;</span>
            <span class="name">关于我们</span>
        </a>
        <a href="#app" class="item">
            <span class="iconfont">&#xe6a3;</span>
            <span class="name">风险评估</span>
        </a>
        <a href="#contact" class="item">
            <span class="iconfont">&#xe7b2;</span>
            <span class="name">用户中心</span>
        </a>
    </footer>

</body>
</html>
<script>
    //根据百度地图的API来创建一个地图对象
    // map 是容器的id值
    var map = new BMap.Map("map");    // 创建Map实例

    // 初始化地图,设置中心点坐标和地图级别
    map.centerAndZoom(new BMap.Point(113.26197, 23.10379), 12);

    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
      mapTypes:[
              BMAP_NORMAL_MAP,
              BMAP_HYBRID_MAP
          ]}));	  
    map.setCurrentCity("广州");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放


</script>